.tooltip-inner {background: #025ec5!important;}
.tooltip.right .tooltip-arrow {border-right-color: #025ec5!important;}
.tooltip.top .tooltip-arrow {border-top-color: #025ec5!important;}
.tooltip.left .tooltip-arrow {border-left-color: #025ec5!important;}
.tooltip.bottom .tooltip-arrow {border-bottom-color: #025ec5!important;}
.box{
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap:wrap;
}
.box:hover {
    animation-fill-mode : forwards;
}
.sunline{
    height: 58rem;
    width: 58rem;
    border: 1px solid #ccc;
    border-radius: 50%;
    display: flex;
    position: relative;
    z-index: 9;
    align-items: center;
    justify-content: center;
    animation: rotate 5s 1 linear;
    flex-wrap:wrap;
}
.sun{
    height: 12rem;
    width: 12rem;
    font-size: 1.7rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    color: #fff;
    background: #025ec5;
    justify-content: center;
    animation: rotate2 5s 1 linear;
}
.earthline{
    height: 12rem;
    width: 12rem;
    font-size: 12rem!important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 10;
    animation: rotate2 2.5s 2 linear;
    cursor: pointer;
}
p.earthline:nth-of-type(1){
    top:-5rem;
    left: 25rem;
}
p.earthline:nth-of-type(2){
    top:12rem;
    left: 50rem;
}
p.earthline:nth-of-type(3){
    top:40rem;
    left: 46rem;
}
p.earthline:nth-of-type(4){
    top:49rem;
    left: 22rem;
}
p.earthline:nth-of-type(5){
    top:38rem;
    left: -2rem;
}
p.earthline:nth-of-type(6){
    top:10rem;
    left: -2rem;
}
@keyframes rotate{
    100%{transform:rotate(360deg);}
}
@keyframes rotate2{
    100%{transform:rotate(-360deg);}
}

.tubiao {
    /*指定观察者与平面的距离，使有透视效果*/
    /*若无法正常3d效果，将perspective属性提到更上一个父容器即可(此处已上提，从items-->container)*/
    perspective: 1000px;
    /*transition: all 1s;*/
}
.items {
    width: 1px;
    margin: 13rem auto;
    /*指定子元素定位在三维空间内*/
    transform-style: preserve-3d;
    /*让所有item的父级元素（即items）旋转，item就是围绕着旋转了*/
    animation: autoMove 8s infinite linear;
}

.item {
    height: 30rem;
    opacity: .6;
    font-size: 30rem;
    line-height: 30rem;
    text-align: center;
    position: absolute;
    z-index: 3;
    cursor: pointer;
}

.item:hover {
    opacity: 1;
}
/*定义自动旋转的动画*/
@keyframes autoMove {
    from { }
    to {
        transform: rotateY(360deg);
    }
}
.items:hover {
    /*鼠标移入 暂停动画*/
    animation-play-state: paused;
    opacity: 1;
}

.item img {
    max-height: 100%;
}

.service {
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap:wrap;
}
.sicon-wrapper {
    text-align: center;
}

.service-icon {
    -webkit-box-shadow: inset 0 0 0 100px rgba(200,200,200,0.6),
    0 1px 2px rgba(0,0,0,0.1);
    -moz-box-shadow: inset 0 0 0 100px rgba(200,200,200,0.6),
    0 1px 2px rgba(0,0,0,0.1);
    box-shadow: inset 0 0 0 100px rgba(200,200,200,0.6),
    0 1px 2px rgba(0,0,0,0.1);

    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    display: inline-block;
    width: 10rem;
    height: 10rem;
    line-height: 10rem;
    margin-left: auto;
    margin-right: auto;
    border-radius: 100%;
    background: #02bec5;
    color: white;
    text-align: center;
}
.service-icon .ms-icon{
    color: white;
}
.service-icon h4 {
    font-size: 1.2rem;
    width: 10rem;
    height: 10rem;
    line-height: 10rem;
    margin-top: -10rem!important;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;

    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}

.service-icon:hover{
    -webkit-box-shadow: 		inset 0 0 0 1px rgba(255,255,255,0.5),
    0 1px 2px rgba(0,0,0,0.5);
    -moz-box-shadow: 		inset 0 0 0 1px rgba(255,255,255,0.5),
    0 1px 2px rgba(0,0,0,0.5);
    box-shadow: 		inset 0 0 0 1px rgba(255,255,255,0.5),
    0 1px 2px rgba(0,0,0,0.5);
}

.service-icon:hover p {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 0;
}

.service-icon:hover h4 {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

.service-icon h4 , .service-icon p {  margin: 0;  }
.link {text-align: center;}
.link>div div {cursor:pointer;border: 1px solid #ccc; border-radius: 3px; overflow: hidden; height: 5rem}
.link>div div img {height: 120%}
.link>div div:hover {border: 1px solid orange;}
.case>div {margin: 2rem 0;}
.case>div>div { overflow: hidden;  cursor: pointer;}
.case img {width: 100%;}

.case_layer {position : absolute;  top : 0;  width : 95%;  height : 100%;  background : rgba(0,0,0,.4) ; display: flex; align-items: center;
    justify-content: center;}
.case_layer h5 {color: #fff; font-size: 3rem;}

@media screen and (max-width: 993px) {
    .case>div {margin: 3rem 2rem;}
    .link>div div {padding-left: 1px}
    .case_layer h5 {font-size: 2rem;}
    .sunline{
        height: 30rem;
        width: 30rem;
    }
    .sun{
        height: 6rem;
        width: 6rem;
        font-size: 1rem;

    }
    .earthline{
        height: 6rem;
        width: 6rem;
        font-size: 6rem!important;
    }
    p.earthline:nth-of-type(1){
        top:-2.5rem;
        left: 12.5rem;
    }
    p.earthline:nth-of-type(2){
        top:6rem;
        left: 26rem;
    }
    p.earthline:nth-of-type(3){
        top:21rem;
        left: 24rem;
    }
    p.earthline:nth-of-type(4){
        top:27rem;
        left: 11rem;
    }
    p.earthline:nth-of-type(5){
        top:18rem;
        left: -1rem;
    }
    p.earthline:nth-of-type(6){
        top:5rem;
        left: 0rem;
    }
}


@media screen and (min-width:993px) {
    .service-icon {
        -webkit-box-shadow: inset 0 0 0 100px rgba(200,200,200,0.6),
        0 1px 2px rgba(0,0,0,0.1);
        -moz-box-shadow: inset 0 0 0 100px rgba(200,200,200,0.6),
        0 1px 2px rgba(0,0,0,0.1);
        box-shadow: inset 0 0 0 100px rgba(200,200,200,0.6),
        0 1px 2px rgba(0,0,0,0.1);

        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -ms-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
        display: inline-block;
        width: 15rem;
        height: 15rem;
        line-height: 15rem;
        margin-left: auto;
        margin-right: auto;
        border-radius: 100%;
        background: #02bec5;
        color: white;
        text-align: center;
    }
    .service-icon .ms-icon{
        color: white;
    }
    .service-icon h4 {
        font-size: 2.4rem;
        width: 15rem;
        height: 15rem;
        line-height: 15rem;
        margin-top: -15rem!important;
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -ms-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;

        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0);
    }

    .service-icon:hover{
        -webkit-box-shadow: 		inset 0 0 0 1px rgba(255,255,255,0.5),
        0 1px 2px rgba(0,0,0,0.5);
        -moz-box-shadow: 		inset 0 0 0 1px rgba(255,255,255,0.5),
        0 1px 2px rgba(0,0,0,0.5);
        box-shadow: 		inset 0 0 0 1px rgba(255,255,255,0.5),
        0 1px 2px rgba(0,0,0,0.5);
    }

    .service-icon:hover p {
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0);
        opacity: 0;
    }

    .service-icon:hover h4 {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    .ms-icon{font-size: 10rem;}
    .service-icon h4 , .service-icon p {
        margin: 0;
    }


}